<template>
  <div id="a2">
    <div class="news-tab">
      <!-- @click.native="$router.go(0)" -->
      <router-link
        :class="['item', { active: $route.path == '/strength/doctors' }]"
        to="/strength/doctors#a0"
        >名医臻享</router-link
      >
      <router-link
        :class="['item', { active: $route.path == '/strength/design' }]"
        to="/strength/design#a1"
        >幸福设计</router-link
      >
      <router-link
        :class="['item', { active: $route.path == '/strength/serve' }]"
        class="item"
        to="/strength/serve#a2"
        >五心服务</router-link
      >
    </div>
    <div class="index wow fadeInUp">
      <div class="serve-top bangxin">
        <div class="sum-up">
          <div class="bg-img-wrap">
            <div class="shadow"></div>
            <img class="img" :src="ListBanner1.picture" alt="" />
          </div>

          <div class="text">
            <div class="tit">{{ ListBanner1.title }}</div>
            <div class="introduct">{{ ListBanner1.description }}</div>
            <div class="article">
              {{ ListBanner1.content }}
            </div>
          </div>
        </div>
        <div class="serve">
          <div class="item" v-if="ListBanner2.length">
            <div class="text">
              <div class="info">
                <div class="info-con">
                  <div class="en">{{ ListBanner2[0].subclassname }}</div>
                  <div class="cn">{{ ListBanner2[0].title }}</div>
                  <div class="introduct">{{ ListBanner2[0].content }}</div>
                  <div class="dot">...</div>
                </div>
              </div>
            </div>
            <div class="img">
              <img :src="ListBanner2[0].picture" alt="" />
            </div>
          </div>
          <div class="item" v-if="ListBanner2.length">
            <div class="text">
              <div class="info">
                <div class="info-con">
                  <div class="en">{{ ListBanner2[1].subclassname }}</div>
                  <div class="cn">{{ ListBanner2[1].title }}</div>
                  <div class="introduct">{{ ListBanner2[1].content }}</div>
                  <div class="dot">...</div>
                </div>
              </div>
            </div>
            <div class="img">
              <img :src="ListBanner2[1].picture" alt="" />
            </div>
          </div>
          <div class="item" v-if="ListBanner2.length">
            <div class="text">
              <div class="info">
                <div class="info-con">
                  <div class="en">{{ ListBanner2[2].subclassname }}</div>
                  <div class="cn">{{ ListBanner2[2].title }}</div>
                  <div class="introduct">{{ ListBanner2[2].content }}</div>
                  <div class="dot">...</div>
                </div>
              </div>
            </div>
            <div class="img">
              <img :src="ListBanner2[2].picture" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="serve-bottom bangxin">
        <div class="item" v-if="ListBanner2.length">
          <div class="img">
            <img :src="ListBanner2[3].picture" alt="" />
          </div>
          <div class="text">
            <div class="info">
              <div class="info-con">
                <div class="en">{{ ListBanner2[3].subclassname }}</div>
                <div class="cn">{{ ListBanner2[3].title }}</div>
                <div class="introduct">{{ ListBanner2[3].content }}</div>
                <div class="dot">...</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item" v-if="ListBanner2.length">
          <div class="img">
            <img :src="ListBanner2[4].picture" alt="" />
          </div>
          <div class="text">
            <div class="info">
              <div class="info-con">
                <div class="en">{{ ListBanner2[4].subclassname }}</div>
                <div class="cn">{{ ListBanner2[4].title }}</div>
                <div class="introduct">{{ ListBanner2[4].content }}</div>
                <div class="dot">...</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  // ajax
  import { AllContent } from "@/assets/js/api";

import { Component, Vue } from "vue-property-decorator";
import commonHeader from "@/components/headers.vue";
import commonFooter from "@/components/footer.vue";
@Component({
  name: "serve",
  components: {
    commonHeader,
    commonFooter,
  },
})
export default class serve extends Vue {
        ListBanner1 = [];
        ListBanner2 = [];
  // 跳转锚点
  goAnchor(selector: string): void {
    if (selector) {
      let anchor = this.$el.querySelector(selector);
      if (anchor) {
        console.log(selector, "selector");
        document.documentElement.scrollTop = anchor.offsetTop;
      }
    }
  }
    mounted() {
      let parameter1 = {
        typename: "实力惠元-五心服务-五心说明",
        sort: 0,
      };
      // banner
      AllContent(parameter1).then((response:any) => {
        // console.log(response.data, "AllContent")
        if (response.data.ReturnCode == 0) {
          if (response.data.Data) {
            var data = response.data.Data;
            this.ListBanner1 = data[0];
                this.$nextTick(() => {
                  if (this.$route.hash) {
                    this.goAnchor(this.$route.hash);
                  }
                });
            let parameter2 = {
              typename: "实力惠元-五心服务-图文管理",
              sort: 0,
            };
            // banner
            AllContent(parameter2).then((response2:any) => {
              // console.log(response2.data, "AllContent")
              if (response2.data.ReturnCode == 0) {
                if (response2.data.Data) {
                  var data = response2.data.Data;
                  this.ListBanner2 = data;
                this.$nextTick(() => {
                  if (this.$route.hash) {
                    this.goAnchor(this.$route.hash);
                  }
                });
                }
              }
            });

          }
        }
      });
    }
  }
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/serve.scss";
</style>
